<template>
    <div class="content">
		<transition 
		 @before-enter="beforeEnter"
		 @enter="enter"
		 @after-enter="afterEnter"
		 >
			<div class="ball" v-show="flag" ref="ball"></div>
		</transition>
		<div class="mui-content">
			<div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<swipt-bb></swipt-bb>
					</div>
				</div>
			</div>
			<div class="mui-card">
				<div class="mui-card-header">小米 (Mi) 小米Note 16G双网通版</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p>市场价：<del>￥2699</del>&nbsp;&nbsp;&nbsp;&nbsp;<span class="seller">销售价：￥2199</span></p>
						<div class="sell">购买数量：
							<numbox @changes="getchangNum"></numbox>
						</div>
						<p>
							<!-- 分析：如何实现加入购物车的时候，拿到选择的数量 -->
							<!-- 1. 经过分析发现： 按钮属于 goodsinfo 页面，			数字属于numberbox 组件 -->
							<!-- 2. 由于涉及到了父子组件的嵌套了，所以 无法直接在 goodsinfo 页面中获取到 选中的商品数量的值 -->
							<!-- 3. 解决：涉及到了 子组件像父组件传值（事件调用机制） -->
							<!-- 4. 事件调用的本质：父向子传递方法，子调用这个方法，同时把数据当作参数 传递给这个方法 -->
							<mt-button size="small" type="primary">立即购买</mt-button>
							<mt-button size="small" type="danger" @click="shopp()" >加入购物车</mt-button>
						</p>
					</div>
				</div>
			</div>
			
			<div class="mui-card">
				<div class="mui-card-header">商品参数</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p>商品货号：SD2932214404</p>
						<p>库存情况：60件</p>
						<p>上架时间：2015-23-10 12:32:22</p>
					</div>
				</div>
				<div class="mui-card-footer">
					<mt-button class="pic" size="large" type="primary" plain>图文介绍</mt-button>
					<mt-button size="large" type="danger" plain>商品评论</mt-button>
					
				</div>
			</div>
         </div>   
    </div>
</template>

<script>
import swipe from '../subcomponents/swipe.vue'
import numbox from '../subcomponents/numbox.vue'
export default {
	data() {
		return {
			flag:false,
			selectNum:'1',//保存用户选中的商品数量，默认为1
		}
	},
	methods: {
		shopp(){
			this.flag = true
		},
		beforeEnter(el){
			el.style.transform="translate(0,0)"
		},
		enter(el,done){
			el.offsetWidth;

			// 小球动画优化思路：
			// 1. 先分析导致 动画 不准确的 本质原因：我们把小球最终位移到的位置已经局限到某一分辨率下的 滚动条未滚动的情况下；
			// 2. 只要分辨率和测试的时候不一样，或者 滚动条有一定的滚动距离之后，问题就出现了；
			// 3. 因此，我们经过分析，得到结论：不能把位置横坐标直接写死了，而是应该根据不同情况，动态计算这个坐标值；
			// 4. 经过分析，得出解题思路：先得到 徽标的 横纵坐标，再得到徽章的横纵坐标，然后让y值求差，x值也求差，得到的结果就是横纵坐标位移的距离
			// 5. 如何 获取 徽标和小球的位置？？？ domObject.getBoundingClientRect()
			
			// 获取小球的 在页面中的位置
			const ballPosition = this.$refs.ball.getBoundingClientRect()									
			// 获取徽标的位置
			const badge = document.getElementById('badge').getBoundingClientRect()
			const Left = badge.left-ballPosition.left 
			const Top =  badge.top-ballPosition.top 

			el.style.transform=`translate(${Left}px, ${Top}px)`

			el.style.transition="all 1s cubic-bezier(.05,-0.27,1,.55)"
			done()
		},
		afterEnter(el){
			this.flag = !this.flag
		},
		getchangNum(count){
			this.selectNum = count
			console.log('父组件得到的值：'+this.selectNum)
		}
	},
    components:{
		"swipt-bb":swipe,
		"numbox":numbox
	}
}
</script>

<style lang="scss">
.content{
	position:relative;
	.seller{
		color:red;
		font-weight:600;
	}
    .sell{
		margin-bottom:10px;
	}
	.mui-card-footer{
		display:block;
	}
	.ball{
		width:20px;
		height:20px;
		background: red;
		border-radius: 10px;
		position:absolute;
		z-index: 100;
		top: 338px;
    	left: 149px;
	}
	.pic{
		margin-bottom: 10px;
	}
}
	
</style>

